<script lang="ts" setup>
import { computed } from "vue";
import { equip1, equip2 } from "@/configs/equip";
import { getShowValue } from "@/utils/equip";

interface Props {
    equip1V2: Equip.EquipInfo;
    equip2V2: Equip.EquipInfo;
}
const props = withDefaults(defineProps<Props>(), {});
const phV2 = computed(() => {
    const dtAI = props.equip1V2.dtAI.find((v) => v.index == equip1.phIndex);
    return getShowValue(dtAI?.value || 0, dtAI?.x1 || 0, dtAI?.x2 || 0, dtAI?.y1 || 0, dtAI?.y2 || 0);
});
const lightIntensityV2 = computed(() => {
    const dtAI = props.equip2V2.dtAI.find((v) => v.index == equip2.lightIntensityIndex);
    return getShowValue(dtAI?.value || 0, dtAI?.x1 || 0, dtAI?.x2 || 0, dtAI?.y1 || 0, dtAI?.y2 || 0);
});
const electricalConductivityV2 = computed(() => {
    const dtAI = props.equip1V2.dtAI.find((v) => v.index == equip1.electricalConductivityIndex);
    return getShowValue(dtAI?.value || 0, dtAI?.x1 || 0, dtAI?.x2 || 0, dtAI?.y1 || 0, dtAI?.y2 || 0);
});
const co2V2 = computed(() => {
    const dtAI = props.equip2V2.dtAI.find((v) => v.index == equip2.co2Index);
    return getShowValue(dtAI?.value || 0, dtAI?.x1 || 0, dtAI?.x2 || 0, dtAI?.y1 || 0, dtAI?.y2 || 0);
});
</script>

<template>
    <section>
        <h3>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-zhiwu"></use></svg>
            <b>环境监控</b>
            <span>Huan Jing Jian Kong</span>
        </h3>
        <hr class="to-right" />
        <div class="content">
            <div class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-guangzhao"></use></svg>
                </div>
                <div class="right">
                    <h4>光照强度</h4>
                    <hr class="to-right" />
                    <p>
                        <b>{{ lightIntensityV2 }}</b>
                        <span>lux</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-suanjiandu"></use></svg>
                </div>
                <div class="right">
                    <h4>酸碱度</h4>
                    <hr class="to-right" />
                    <p>
                        <b>{{ phV2 }}</b>
                        <span></span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-turangdiandaoshuai3"></use></svg>
                </div>
                <div class="right">
                    <h4>电导率</h4>
                    <hr class="to-right" />
                    <p>
                        <b>{{ electricalConductivityV2 }}</b>
                        <span>dS/m</span>
                    </p>
                </div>
            </div>
            <div class="item">
                <div class="left">
                    <svg class="icon" aria-hidden="true"><use xlink:href="#icon-eryanghuatan"></use></svg>
                </div>
                <div class="right">
                    <h4>二氧化碳浓度</h4>
                    <hr class="to-right" />
                    <p>
                        <b>{{ co2V2 }}</b>
                        <span>ppm</span>
                    </p>
                </div>
            </div>
        </div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
section {
    .content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 10px;
        .item {
            height: 100%;
            display: flex;
            align-items: center;
            column-gap: 10px;
            .left {
                position: relative;
                flex-shrink: 0;
                width: 80px;
                height: 100%;
                background: url("@/assets/images/bottom.png") no-repeat 0 center / 100% 60px;
                .icon {
                    position: absolute;
                    top: 22px;
                    left: 50%;
                    transform: translateX(-50%);
                    color: var(--primary-color);
                    font-size: 32px;
                }
            }
            .right {
                flex: 1;
                display: flex;
                flex-direction: column;
                row-gap: 4px;
                h4 {
                    color: var(--primary-color);
                    font-size: 14px;
                }
                p {
                    display: flex;
                    align-items: flex-end;
                    column-gap: 4px;
                    b {
                        color: #fff;
                        font-size: 20px;
                        font-weight: normal;
                    }
                    span {
                        color: #999;
                        font-size: 12px;
                        font-weight: normal;
                    }
                }
            }
        }
    }
}
</style>
